<template>
	<view class="box">
		<view class="row">
			第2步：基本资料
		</view>
		<view class="row_title">
			签约人
			<view class="focus">
				*
			</view>
		</view>
		<u-input placeholder="请输入姓名" maxlength="10" v-model="form.name"></u-input>
		<view class="row_title">
			请选择签约方式
			<view class="focus">
				*
			</view>
		</view>
		<view class="radio">
			<u-radio-group placement="row" @change="activeValue">
				<u-radio activeColor="#1F4AEC" shape="circle" label="纸质签约" v-model="form.activeType"
					:customStyle="{marginRight: '20px'}"></u-radio>
				<u-radio activeColor="#1F4AEC" shape="circle" label="电子签约" :disabled="true"></u-radio>
			</u-radio-group>
		</view>

		<view class="row_title">
			联系人身份证号
			<view class="focus">
				*
			</view>
		</view>
		<view class="input" style="color: #d2d6d8;"  @click="showCard = true" v-if="form.idCard == ''">
			请输入证件号码
		</view>
		<view class="input"  v-else @click="showCard = true">
			{{ form.idCard }}
		</view>
		<view class="row_title">
			所属省市
			<view class="focus">
				*
			</view>
		</view>
		<picker mode="selector" :value="index" :range="array" @change="region">
			<view class="input">
				<view class="city">
					{{array[index]}}
				</view>
				<u-icon name="map-fill" color="#bbbbbb" size="20"></u-icon>
			</view>

			<!-- <u-input placeholder="请选择区域" v-model="form.houseCityId" :disabled="true"
				disabledColor="#fff" fontSize="18">
			</u-input> -->
		</picker>
		<view class="row_title">
			总房量
			<view class="focus">
				*
			</view>
		</view>
		<u-input placeholder="请输入" type="number" border="surround" maxlength="5" v-model="form.houseCount"></u-input>
		<view class="row_title">
			要求提前交租天数
			<view class="focus">
				*
			</view>
		</view>
		<u-input placeholder="请输入" type="number" border="surround" maxlength="2" v-model="form.tiqianPayDays"></u-input>
		<view class="row_title">
			退房提前通知天数
			<view class="focus">
				*
			</view>
		</view>
		<u-input placeholder="请输入" type="number" border="surround" maxlength="2"
			v-model="form.tiqianLeaveExplainDays"></u-input>
		<view class="row_title">
			实际联系地址
			<view class="focus">
				*
			</view>
		</view>
		<view class="">
			<u-input placeholder="请输入联系地址" v-model="form.realityAddress">
				<!-- <u-icon slot="suffix" name="arrow-down"></u-icon> -->
			</u-input>
		</view>
		<view class="row_title">
			收款信息
			<view class="focus">
				*
			</view>
		</view>
		<view class="collection">
			<view class="link">
				<view class="link_title">
					银行卡号:
				</view><u-input placeholder="请输入" maxlength="19" border="none" v-model="form.bankNo"
					:customStyle="{backgroundColor:'#fff',padding:'10rpx'}"></u-input>
			</view>
			<view class="link">
				<view class="link_title">
					微信号:
				</view>
				<u-input placeholder="请输入" border="none" v-model="form.wechatNo"
					:customStyle="{backgroundColor:'#fff',padding:'10rpx'}"></u-input>
			</view>
			<view class="link">
				<view class="link_title">
					支付宝:
				</view>
				<u-input placeholder="请输入" border="none" v-model="form.alipayNo"
					:customStyle="{backgroundColor:'#fff',padding:'10rpx'}"></u-input>
			</view>
		</view>
		<view class="row_title">
			联系人身份证证件
		</view>
		<view class="row_title">
			正面
			<view class="focus">
				*
			</view>
		</view>
		<!-- <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1"
			accept="image"></u-upload> -->
		<Upload type="img" num="1" @change="changetails"></Upload>
		<view class="row_title">
			反面
			<view class="focus">
				*
			</view>
		</view>
		<!-- 		<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1"
			accept="image"></u-upload> -->
		<Upload type="img" num="1" @change="changeFront"></Upload>
		<view class="row_title">
			{{idCardTypeMsg}}
			<!-- <view class="focus">
				*
			</view> -->
		</view>
		<Upload type="img" num="1" @change="changeHandheld"></Upload>
		<!-- 	<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1"
			accept="image"></u-upload> -->
		<!-- <view class="row_title">
			人脸认证
			<view class="focus">
				*
			</view>
		</view>
		<view class="button_box">
			<u-button type="primary" text="去认证" size="small"></u-button>
		</view> -->
		<view class="button_box" @click="submit">
			<u-button type="primary" text="立即提交"></u-button>
		</view>
		<u-keyboard ref="uKeyboard" mode="card" :show="showCard" @cancel="showCard = false" @confirm="showCard = false"
			@change="valChange" @backspace="backspace"></u-keyboard>
		<u-toast ref="uToast"></u-toast>
		<!-- <u-picker :show="show" :columns="cityList" @cancel="show = false" @confirm="confirm" keyName="pinyin"></u-picker> -->
	</view>
</template>

<script>
	import {
		getCity
	} from "../../api/setin/index.js";
	import {
		getSettled
	} from "../../api/my/index.js";
	import Upload from "@/components/Upload/index.vue"
	export default {
		components: {
			Upload
		},
		data() {
			return {
				idCardTypeMsg:'手持身份证(正面)',
				show: false,
				showCard: false,
				fileList1: [],
				cityList: [],
				array: [],
				index: 0,
				// cityList: [uni.getStorageSync("cityList") || []],
				chooseRegion: [],
				form: {
					houseUserPhone: '',
					houseCityId: '',
					name: '',
					idCard: '',
					idFaceImg: '',
					idNembImg: '',
					idHandImg: '',
					realityAddress: '',
					houseCount: '',
					tiqianPayDays: '',
					tiqianLeaveExplainDays: '',
					bankNo: '',
					wechatNo: '',
					alipayNo: '',
					contractParty:''
				},

			}
		},
		onLoad(optien) {
			this.form.houseUserPhone = optien.houseUserPhone;
			//this.form.contractParty = optien.radio;
			if(optien.radio=='个人业主'){
				this.idCardTypeMsg='房产证内容照片';
				this.form.contractParty='3';
			}
			if(optien.radio=='大房东'){
				this.idCardTypeMsg='手持身份证(正面)';
				this.form.contractParty='1';
			}
			this.getAddress()
		},
		methods: {
			valChange(val) {
				if (this.form.idCard.length == 18) return
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.form.idCard += val;

			}, 
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.form.idCard.length) this.form.idCard = this.form
					.tenantIdCard.substr(0, this.form.idCard.length - 1);

			},
			getHouseCity() {
				this.show = true
				// this.getAddress()
			},
			region(e) {
				this.index = e.detail.value
			},
			// confirm(e) {

			// 	this.form.houseCityId = e.value.toString()
			// },
			async submit() {
				if (this.form.name.length == 0)
					return this.$refs.uToast.show({
						message: '请输入签约人',
						type: 'error'
					})
				if (this.form.idCard.length == 0)
					return this.$refs.uToast.show({
						message: '请输入身份证号',
						type: 'error'
					})
				//身份证格式校验
				let idvalue = this.form.idCard
				const idCardRegex =
					/^[1-9]\d{5}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}[\dXx]$/;
				if (!idCardRegex.test(idvalue)) {
					this.form.idCard = '';
					return this.$refs.uToast.show({
						message: '身份证格式错误',
						type: 'error'
					})
				}
				if (this.form.houseCount.length == 0)
					return this.$refs.uToast.show({
						message: '请输入总房量',
						type: 'error'
					})
				if (this.form.tiqianPayDays.length == 0)
					return this.$refs.uToast.show({
						message: '请输入提前交租天数',
						type: 'error'
					})
				if (this.form.tiqianLeaveExplainDays.length == 0)
					return this.$refs.uToast.show({
						message: '请输入提前交租天数',
						type: 'error'
					})
				if (this.form.realityAddress.length == 0)
					return this.$refs.uToast.show({
						message: '请输入实际联系地址',
						type: 'error'
					})
				if (!(this.form.bankNo.length > 0 || this.form.wechatNo.length > 0 || this.form.alipayNo.length > 0)) {
					return this.$refs.uToast.show({
						message: '请输入至少一项收款信息',
						type: 'error'
					})
				}
				if (this.form.idFaceImg.length == 0)
					return this.$refs.uToast.show({
						message: '请上传身份证正面',
						type: 'error'
					})
				if (this.form.idNembImg.length == 0)
					return this.$refs.uToast.show({
						message: '请上传身份证反面',
						type: 'error'
					})
			/* 	if (this.form.idHandImg.length == 0)
					return this.$refs.uToast.show({
						message: '请上传手持身份证正面',
						type: 'error'
					}) */

				const res = await getSettled({
					name: this.form.name, //姓名/公司名称
					idCard: this.form.idCard, //证件号
					idFaceImg: this.form.idFaceImg, //身份证人像面地址
					idNembImg: this.form.idNembImg, //身份证国徽面地址
					idHandImg: this.form.idHandImg, //手持身份证图片地址
					houseUserPhone: this.form.houseUserPhone, //用户手机号
					houseCityId: this.index, //房屋所在城市id
					houseCount: this.form.houseCount, //该城市房屋总数量
					tiqianPayDays: this.form.tiqianPayDays, //提前交租天数
					tiqianLeaveExplainDays: this.form.tiqianLeaveExplainDays, //退房提前申请天数
					realityAddress: this.form.realityAddress, //实际联系地址
					bankNo: this.form.bankNo, //收款-银行卡
					wechatNo: this.form.wechatNo, //收款--微信
					alipayNo: this.form.alipayNo ,//收款--支付宝
					contractParty: this.form.contractParty //房东注册类型
				})
				if (res.data.code == 200) {
					this.$refs.uToast.show({
						message: '提交成功',
						type: 'success'
					})
					uni.reLaunch({
						url: '../home/index',
						animationType: this.animation.type,
						animationDuration: this.animation.time

					})
				} else {
					this.$refs.uToast.show({
						message: res.data.msg,
						type: 'error'
					})
				}
			},
			async getAddress() {
				let loadding = uni.showLoading({
					title: '加载中'
				})
				const res = await getCity();
				if (res.data.code != 200) return uni.showToast({
					title: '获取城市列表失败',
					icon: 'none'
				})

				// this.cityList = res.data.rows;

				// this.cityList = this.cityList.concat(res.data.rows);

				res.data.rows.map((item) => {
					this.array.push(item.name)

				})
				// this.cityList = res.data.rows
				// this.cityList = [
				// 	[].concat(uni.getStorageSync("cityList"))
				// ]

				// uni.setStorageSync("cityList", this.cityList)
				uni.hideLoading(loadding)
			},
			//正面
			changetails(img) {

				this.form.idFaceImg = img[0]
			},
			changeFront(img) {
				this.form.idNembImg = img[0]
			},
			changeHandheld(img) {
				this.form.idHandImg = img[0]
			},
			//新增图片
			afterRead() {

			},
			//删除图片
			deletePic() {

			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.box {
		width: 100%;
		height: 100%;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;

		.row {
			padding-top: 30rpx;
			padding-bottom: 40rpx;
		}

		.input {
			@include flexBetween;
			border: #d2d6d8 solid 1rpx;
			border-radius: 10rpx;
			padding: 20rpx;
			font-size: 32rpx;
		}

		.radio {
			margin-top: 20rpx;
			margin-bottom: 30rpx;
		}

		.row_title {
			display: flex;
			align-items: center;
			padding: 30rpx 0;

			.focus {
				color: red;
			}
		}

		.collection {
			background-color: #f3f8fd;
			color: $noimportant;
			border-radius: 20rpx;
			padding: 20rpx;

			.link {
				line-height: 2;
				display: flex;
				align-items: center;

				.link_title {
					margin-right: 30rpx;
				}
			}
		}

		.button_box {
			width: 100%;
			margin: 30rpx 0;
			box-sizing: border-box;
		}
	}
</style>